<script setup>
import Product from "@/components/Product.vue";
import { useCartStore } from "@/stores/cart.js";
import { ref, defineProps, computed } from "vue";
import {useRouter} from 'vue-router'
const props = defineProps(["shopInfo"]);
const router = useRouter()

const cartStore = useCartStore();

const showCart = ref(false)

const cartShop = computed(() => {
  return cartStore.cartList.find((item) => item.name == props.shopInfo.name);
});

const cartShopList = computed(() => {
  if (cartShop.value) {
    return cartShop.value.list;
  } else {
    return [];
  }
});

const cartShopCount = computed(() => {
  if (cartShop.value) {
    return cartShop.value.list.reduce((sum, item) => (sum += item.number), 0);
  } else {
    return 0;
  }
});

const cartShopChecked = computed(() => {
  if (cartShop.value) {
    return cartShop.value.list.filter((item) => item.checked);
  } else {
    return [];
  }
});

const cartShopListCount = computed(()=>{
    if(cartShop.value){
        return cartShopChecked.value.reduce((sum,item)=> sum+=item.number ,0)
    }else{
        return 0
    }
})

const total = computed(()=>{
  return cartShopChecked.value.reduce((sum,item)=> sum+=item.price *item.number ,0).toFixed(2)
})

const checkedAll = computed({
  get(){
    return cartShopList.value.every((item)=>item.checked)
  },
  set(data){
    console.log(data);
    cartShopList.value.forEach(item=>item.checked = data)
  }
})

const check = ()=>{
  router.push({
    path:'/orderconfirmation',
    query:{shopName:cartShop.value.name}
  })
}

</script>

<template>
  <div class="cart">
    <div class="cart_mask" v-if="showCart" @click="showCart = !showCart" ></div>
    <div class="cart_product" v-if="showCart">
      <div class="cart_product_header" v-if="true">
        <div class="cart_product_header_allChecked">
          <input type="checkbox" class="circle-checkbox" v-model="checkedAll"/> 全选
        </div>
        <div class="cart_product_header_clear">清空购物车</div>
      </div>
      <div class="cart_product_list">
        <div class="cart_product_list_item" >
          <div class="checkbox"  v-for="item in cartShopList" :key="item.title">
            <!-- <input type="checkbox" class="circle-checkbox" :checked="item.checked" @change="changeChecked(item)" name="" id=""> -->
            <input type="checkbox" class="circle-checkbox" v-model="item.checked"/>
          </div>
          <div class="content">
            <Product :product="cartShopList" :shopInfo="cartShop" />
          </div>
        </div>
      </div>
    </div>
    <div class="cart_check" @click="showCart = !showCart">
      <div class="cart_check_icon">
        <img src="http://www.dell-lee.com/imgs/vue3/basket.png" alt="" />
        <span class="tag" v-if="cartShopListCount>0">{{cartShopListCount}}</span>
      </div>
      <div class="cart_check_empty" v-if="cartShopCount == 0">购物车是空的</div>
      <div class="cart_check_content" v-else>
        <div class="cart_check_content_total_price">
          总计 : <span class="check_content_total_price_number">￥{{total}}</span>
        </div>
        <div class="cart_check_content_submit" @click="check">结算</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.cart {
  &_mask {
    position: absolute;
    top: 0;
    bottom: 0.5rem;
    left: 0;
    right: 0;
    background-color: rgba($color: #000000, $alpha: 0.4);
  }

  &_product {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0.5rem;
    background-color: $bgColor;

    //圆形复选框
    /* 设置选中背景 */
    .circle-checkbox:checked {
      background: #1673ff;
    }

    /* 设置复选框样式 */
    .circle-checkbox {
      width: 0.2rem;
      height: 0.2rem;
      background-color: #ffffff;
      border: solid 1px $light-fontColor;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      font-size: 0.8rem;
      margin: 0;
      padding: 0;
      position: relative;
      display: inline-block;
      vertical-align: top;
      cursor: default;
      -webkit-appearance: none;
      -webkit-user-select: none;
      user-select: none;
    }

    /* 设置伪类，即显现的对勾样式 */
    .circle-checkbox:checked::after {
      content: "";
      top: 5px;
      left: 4px;
      position: absolute;
      background: transparent;
      border: #fff solid 2px;
      border-top: none;
      border-right: none;
      height: 3px;
      width: 8px;
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }

    &_header {
      padding: 0.18rem;
      display: flex;
      justify-content: space-between;
    }

    &_list {
      max-height: 3rem;
      overflow-y: scroll;

      &_item {
        display: flex;

        .checkbox {
          display: flex;
          align-items: center;
          margin-left: 0.18rem;
        }

        .content {
          flex: 1;
          width: 100%;
        }
      }
    }
  }

  &_check {
    width: 100%;
    height: 0.49rem;
    border-top: 0.01rem solid $content-bgColor;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    // 购物车图标
    &_icon {
      width: 0.84rem;
      height: 0.49rem;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      img {
        width: 0.28rem;
        height: 0.26rem;
      }

      .tag {
        display: inline-block;
        width: 0.15rem;
        height: 0.15rem;
        border-radius: 50%;
        background-color: $hightlight-fontColor;
        color: $bgColor;
        font-size: 0.1rem;
        text-align: center;
        position: absolute;
        top: 0.05rem;
        right: 0.18rem;
      }
    }
    // 空购物车
    &_empty {
      line-height: 0.49rem;
    }
    // 总价
    &_content {
      flex: 1;
      display: flex;
      position: relative;
      width: 100%;

      &_total_price {
        flex: 1;
        line-height: 0.49rem;
        color: $hightlight-fontColor;

        &_number {
          font-size: 0.18rem;
        }
      }
      &_submit {
        width: 0.98rem;
        height: 0.49rem;
        background-color: $btn-bgColor;
        color: $bgColor;
        text-align: center;
        line-height: 0.49rem;
      }
    }
  }
}
</style>